<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>6_固定定位广告条</title>
    <style>
        .top{
            height: 120px;
            background-color: #5AA4AE;
            color: #fff;
            font-size: 30px;
            position: fixed;
            top: 0;
            /*视口 ViewPort 视口宽度vw 视口高度vh 值为整数，为视口的百分比 50vw 100vh width height*/
            width: 100vw;/*100%的视口宽度*/
        }
        .main{
            margin-top: 130px;
        }
        .left,.right{
            width: 60px;
            height: 200px;
            position: fixed;
            top:300px;
        }
        .left{
            background-color: #fff799;
            left: 20px;
        }
        .right{
            background-color: #F35336;
            right: 20px;
        }
    </style>
</head>
<body>
<div class="top">我是顶部的广告条</div>
<div class="left">我是左侧的广告条</div>
<div class="right">我是右侧的广告条</div>
<div class="main">
    我是内容
    <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus commodi consequuntur, doloremque eveniet,
        harum impedit iure necessitatibus nulla officia sunt ullam voluptate voluptatum? A amet facilis illum, minus
        natus suscipit!
    </div>
    <div>At blanditiis necessitatibus nemo obcaecati repudiandae. Ab accusantium adipisci, eius enim, fuga impedit
        incidunt laborum molestiae nesciunt non odio quia quibusdam quo ut vel! Aperiam consectetur eligendi eveniet
        facere quae?
    </div>
    <div>A ad alias amet animi at atque, consequuntur dicta ea eaque eos excepturi facere fugiat id impedit maxime neque
        possimus praesentium quam qui quos suscipit ullam ut. Maiores, necessitatibus, provident?
    </div>
    <div>Deserunt enim exercitationem molestiae nostrum quis repellendus repudiandae voluptate! Asperiores aut
        blanditiis cum deserunt distinctio, error necessitatibus nihil, nisi porro, quo repellendus sapiente totam!
        Aspernatur doloribus facilis id quo sequi.
    </div>
    <div>Aliquid deserunt id maxime minima odit ratione tempora. Accusamus beatae dolore excepturi minus quaerat,
        reprehenderit sunt! Ad architecto eos laborum neque reiciendis repellat tenetur vel vitae voluptas, voluptatem.
        Odio, porro!
    </div>
    <div>Culpa cupiditate deserunt dolores dolorum excepturi sequi suscipit totam. Animi asperiores at enim ipsa nostrum
        quod soluta sunt, totam! Ab ad adipisci error fugit possimus quibusdam veritatis, vero. Aliquam, consequuntur!
    </div>
    <div>Animi aperiam atque cupiditate delectus dolorem dolores, eius exercitationem explicabo fugit hic id laborum
        magnam neque nulla possimus praesentium quaerat quis quo repellat repellendus repudiandae sint sunt tempore
        temporibus voluptatum?
    </div>
    <div>Cupiditate dolor, eum ex facilis molestiae ratione sapiente vero voluptatem voluptatum? Dolores enim fuga ipsa
        itaque, maiores neque obcaecati perspiciatis quam quas tempora. Dolorum, rem rerum sequi sit ullam voluptas?
    </div>
    <div>Est illo laudantium maxime! Ad aliquam, aliquid beatae commodi cum cumque cupiditate deleniti dolores ea
        excepturi inventore laudantium odio omnis pariatur perspiciatis quam quisquam tempora tempore temporibus, totam
        voluptas voluptatum?
    </div>
    <div>Aliquam architecto consequatur, cum cumque delectus deserunt ea earum error fuga fugit in iure maxime modi
        quibusdam quidem sequi soluta tempora unde vel voluptas. Alias asperiores eligendi nisi pariatur suscipit?
    </div>
    <div>Cumque dolore doloribus explicabo nam natus nesciunt nulla numquam, omnis placeat quod quos recusandae,
        tempora. Aperiam at distinctio ipsa iure, nemo odit totam! Ab, accusantium amet atque neque soluta voluptas?
    </div>
    <div>Aspernatur consequuntur, facilis hic modi molestias necessitatibus nemo, nisi obcaecati porro quisquam ratione
        rem reprehenderit, sapiente voluptate voluptates. At eum id, magnam nam nihil nulla officia porro quaerat
        ratione veniam.
    </div>
    <div>Accusantium alias, amet aspernatur corporis distinctio, eveniet expedita illo impedit, iusto magni molestiae
        molestias provident quaerat quam rem repellat sapiente soluta unde veniam voluptates. Autem iusto molestiae
        necessitatibus qui voluptates.
    </div>
    <div>Accusantium at aut commodi dicta dolor ea esse explicabo facilis fugit inventore ipsa iste iure iusto labore,
        magni nisi odio perferendis quaerat quam quisquam quod repellat sequi voluptates. Non, rem!
    </div>
    <div>Architecto atque debitis deserunt eos nesciunt nihil reiciendis repellendus. Doloremque eligendi et fugit hic
        minima nesciunt quas repudiandae! At blanditiis corporis deleniti, dolore doloribus fugit minima saepe vitae
        voluptate voluptatum.
    </div>
    <div>Aliquam aut cum ipsam iusto necessitatibus nisi quisquam? A aspernatur aut distinctio dolores doloribus eos
        illum impedit iure iusto modi optio provident quaerat quas quis quod sit veritatis voluptate, voluptatum.
    </div>
    <div>Culpa debitis dolorum eligendi excepturi id inventore minima nihil numquam, rem saepe vel veniam voluptates
        voluptatum. Alias aperiam at consectetur dolorem ducimus fugit hic nostrum praesentium, quasi qui vitae
        voluptatibus!
    </div>
    <div>Consequuntur, deleniti distinctio eligendi hic inventore ipsum itaque non ratione rem, reprehenderit sunt
        tenetur voluptate, voluptatum! Accusantium commodi consequuntur doloribus facilis quo ratione ullam. Earum iste
        magnam possimus. Omnis, repellat.
    </div>
    <div>Aliquid aperiam culpa deleniti dignissimos doloremque eius impedit inventore ipsam ipsum iste, neque nobis,
        obcaecati omnis optio porro possimus suscipit voluptatibus voluptatum! Doloremque odit provident quis quo
        repellat! Beatae, quidem.
    </div>
    <div>Assumenda deserunt eius esse hic impedit molestias voluptatibus. Ab accusantium animi aspernatur at atque
        consectetur eligendi enim esse, exercitationem fuga fugiat, harum in, laborum maiores nesciunt praesentium
        ratione sequi voluptates!
    </div>
    <div>Accusamus at aut autem cupiditate dolorum facilis harum impedit iusto nam omnis, quam quod, repudiandae sint,
        tempora temporibus! Accusamus distinctio eius excepturi impedit necessitatibus nulla porro suscipit velit?
        Laborum, mollitia!
    </div>
    <div>Accusantium error et ex ipsam libero perferendis quas tempore vitae. Accusantium blanditiis delectus, dicta id
        inventore nihil quidem reprehenderit ullam? Alias, beatae culpa earum eos fugiat fugit incidunt pariatur quae.
    </div>
    <div>Alias architecto dolorum ea minima mollitia nostrum obcaecati odit praesentium quasi rem repudiandae sint
        soluta, tempore totam ut voluptate voluptates voluptatibus? Esse ipsam perspiciatis quasi, suscipit totam
        voluptatum. Quas, rerum.
    </div>
    <div>Amet deleniti dolorem ex itaque libero minus odit quaerat, repellendus? Autem consequatur eos, esse excepturi
        exercitationem facere nam numquam quas quia ratione rem repudiandae voluptas? Aut dolores dolorum laudantium
        voluptas.
    </div>
    <div>Aliquam, debitis doloremque doloribus esse et ex illum in inventore iusto labore laboriosam necessitatibus
        ratione reiciendis, suscipit tempora. Ad atque ea eum fuga illo nemo, officia quidem quod sequi veniam.
    </div>
    <div>Cum dolor id libero praesentium repellat similique! Accusamus asperiores culpa cumque deleniti est harum hic
        ipsam iusto laudantium maxime minus modi nulla odio pariatur quas qui quos reprehenderit sequi, unde.
    </div>
    <div>Accusantium animi asperiores aspernatur beatae cumque deserunt, eligendi, eos esse et excepturi harum ipsam
        iure molestias possimus sit unde voluptates? Aliquid asperiores dolor est quae voluptates. Cum iure minima
        recusandae.
    </div>
    <div>Alias amet atque debitis dolor dolore dolorum ducimus earum eligendi, error expedita in omnis porro quaerat
        quasi quibusdam, rem sunt tenetur voluptatem. Beatae facere illo sed sint voluptatum. Cupiditate, velit.
    </div>
    <div>Ab at ea, enim fuga impedit magnam nesciunt provident velit! Dolorum nobis placeat quisquam quos rem. Aut
        consequuntur cumque cupiditate deleniti est fuga, illo inventore, iure magnam minus temporibus voluptates.
    </div>
    <div>Commodi consectetur delectus enim facere natus quis quod totam veritatis! At dignissimos, dolores error est
        ipsam laboriosam maxime quis rem ut voluptate? Adipisci corporis debitis dolore, error qui saepe vitae.
    </div>
    <div>Amet atque aut consequuntur corporis delectus dolor enim itaque iure molestias nam necessitatibus nihil nobis
        odio optio porro quas ratione reiciendis rem sit soluta, sunt tenetur vel veniam vero vitae!
    </div>
    <div>Animi assumenda aut blanditiis consequuntur delectus dicta fugit harum hic illo ipsam iusto laborum modi odio
        perferendis praesentium, quidem ratione saepe tempore totam voluptatem. Dolores eum molestias quibusdam quos
        tenetur.
    </div>
    <div>Laudantium modi molestiae non soluta unde. Architecto doloremque ex fuga impedit magnam modi nemo nulla
        officiis, placeat, recusandae sunt velit voluptas. Beatae consequuntur hic, ipsam ipsum labore pariatur quod
        sunt.
    </div>
    <div>Ad aperiam culpa debitis ea expedita fuga ipsam iste labore nesciunt nisi odio officiis, pariatur perspiciatis
        qui quisquam reprehenderit tempora tenetur, totam unde velit vitae voluptas voluptatem! Adipisci, blanditiis
        veniam!
    </div>
    <div>Corporis enim esse obcaecati odit perferendis porro praesentium, sunt? Adipisci mollitia sequi sit? Assumenda
        dolorum excepturi facilis labore nemo neque nostrum odit omnis porro quo, sequi sunt tempore tenetur vero.
    </div>
    <div>Aperiam error fugiat libero magni omnis quaerat quia quo, quos recusandae sit voluptate voluptates voluptatum.
        Architecto, consectetur delectus, ea exercitationem itaque molestias quae quam rerum sed sequi soluta tempore,
        voluptates.
    </div>
    <div>Aut autem consectetur eaque eum facere fugit hic id iste minus, nesciunt nihil nisi officia omnis pariatur,
        provident qui quod repellendus reprehenderit sint sit! Accusamus ad corporis dolorum et rerum.
    </div>
    <div>Animi, asperiores autem debitis, distinctio dolorem dolores in ipsa obcaecati placeat possimus quis, sed soluta
        sunt? Accusamus asperiores eligendi eveniet iure nihil, nobis non numquam optio perspiciatis quae quod
        veritatis!
    </div>
    <div>A cumque deleniti dolorum, earum eum expedita explicabo illum impedit iste itaque minima nesciunt optio
        perferendis porro provident quo reiciendis repellendus reprehenderit suscipit, voluptatem! Autem ea eveniet
        exercitationem illum labore!
    </div>
    <div>Aliquid consectetur deleniti facere impedit ipsum maxime nemo odit, placeat, qui quibusdam rem tempora totam
        veritatis. Alias aut commodi dicta distinctio impedit laboriosam laudantium, nostrum porro provident quibusdam
        reiciendis voluptates.
    </div>
    <div>Accusamus adipisci, assumenda blanditiis dignissimos doloremque doloribus, earum ex impedit ipsum iure
        necessitatibus nobis perferendis quam rem sapiente suscipit voluptate. Eaque ipsam pariatur qui recusandae!
        Consequuntur doloremque enim molestias quo?
    </div>
    <div>Culpa debitis dicta dignissimos distinctio doloremque dolorum ea enim eveniet excepturi id illum impedit in
        iusto laborum maiores molestiae obcaecati pariatur quae quia, quo recusandae reprehenderit rerum suscipit totam
        voluptate!
    </div>
    <div>Ipsum labore magnam modi nam nisi odit vitae? Ab at autem consectetur deserunt earum eius et iure modi
        molestias nemo nobis placeat, rerum tempore vero voluptates. Alias at necessitatibus nulla.
    </div>
    <div>A ab accusamus, accusantium debitis dolorem incidunt maiores molestiae porro quae quibusdam quo sint sit
        tempora tenetur vel voluptatem voluptates voluptatum? Accusantium animi atque consequuntur dolorem et officia
        quaerat repellendus!
    </div>
    <div>Ad, aliquid, vitae? Architecto consectetur inventore ipsa labore repellat? At consequuntur deleniti doloremque
        ducimus est excepturi fugit inventore, ipsa iste iusto maxime molestiae nobis odio omnis placeat repudiandae
        saepe voluptates?
    </div>
    <div>Aliquam at atque beatae blanditiis consectetur consequatur cupiditate delectus doloribus ducimus ea earum
        eligendi expedita facilis illum iure libero maiores molestias odit omnis perferendis porro, quibusdam
        reprehenderit sequi similique veritatis?
    </div>
    <div>Deserunt, eligendi fugit pariatur quo recusandae rerum suscipit voluptatem. Animi aut debitis ipsum porro
        sapiente ut, veniam voluptate! Dolorum, excepturi fugit ipsum nihil quae quis rem. Asperiores delectus ex quos?
    </div>
    <div>Accusantium alias assumenda beatae doloremque eos, error esse est explicabo fugiat minima nulla obcaecati odio
        officiis omnis perferendis placeat possimus quia quibusdam quos recusandae similique sit sunt velit vero,
        voluptatum?
    </div>
    <div>Corporis eius esse expedita explicabo molestiae, natus nihil pariatur quam recusandae repudiandae! A aliquam
        amet consequuntur corporis doloremque eius et facere facilis, fuga, fugiat maiores non perspiciatis quam quis
        rerum.
    </div>
    <div>Ab amet animi consectetur cum dicta eaque eos eveniet fugit in inventore ipsa itaque magnam, maxime nisi, non
        obcaecati pariatur porro quaerat quam quisquam quo ratione reprehenderit unde veritatis vitae.
    </div>
    <div>Corporis doloremque excepturi expedita illo libero, nesciunt quibusdam rem vel. Alias aut earum eveniet
        explicabo facere facilis illo impedit in laborum laudantium minus nesciunt nihil odit, quam quibusdam, totam
        veniam.
    </div>
    <div>Animi atque consequatur dignissimos doloribus eius eos et in molestias nulla pariatur, possimus quia totam
        veritatis, voluptas voluptate. Asperiores aspernatur aut commodi dolor eos eum optio possimus tempore totam
        voluptates!
    </div>
    <div>Accusantium amet atque culpa dicta doloribus dolorum ducimus enim est eveniet fuga iusto laudantium maiores
        mollitia nihil officiis optio porro quae repellendus, sequi sit soluta veritatis vitae voluptatem. Doloremque,
        itaque!
    </div>
    <div>A, aliquam atque commodi culpa cum delectus error facilis fugiat ipsa nemo neque nesciunt nisi perferendis
        placeat qui quia quisquam quo recusandae saepe sed sit soluta vero voluptatem voluptates voluptatum!
    </div>
    <div>Animi esse id nam nulla quod sit suscipit, tempore tenetur ullam velit? Ab assumenda autem error excepturi hic
        magni nobis. Consequatur distinctio impedit iure neque nobis odio, quidem sint totam.
    </div>
    <div>Amet aperiam blanditiis cum dicta dolore dolores esse ex, hic iste laudantium minus natus nesciunt nisi non
        numquam odit officia officiis porro quam quas repellendus saepe sed, sint totam vero!
    </div>
    <div>Aspernatur atque blanditiis culpa dignissimos esse explicabo libero, maiores mollitia perspiciatis, quaerat
        reiciendis tempora tempore totam? Ab accusamus consequatur, cum doloremque doloribus eius incidunt maiores
        placeat quasi quidem reiciendis repellendus!
    </div>
    <div>Accusamus asperiores cum laudantium minima nemo nulla numquam quibusdam quis sequi sit? Alias blanditiis ea, ex
        molestiae officiis quo repellendus veniam. Commodi eum ipsa, magni natus numquam officia similique suscipit?
    </div>
    <div>Aliquid, assumenda beatae blanditiis cupiditate dolore ea eius eos eveniet exercitationem facilis fugiat fugit
        inventore ipsa iste magnam, mollitia nisi optio placeat quia rem sed tenetur ullam velit vitae voluptate.
    </div>
    <div>Architecto ex optio quisquam. Aliquid at autem consequatur corporis delectus doloribus eum eveniet harum in
        ipsam, itaque iure minus, molestiae molestias nemo possimus quae reiciendis reprehenderit rerum tempora velit
        voluptatum!
    </div>
</div>
</body>
</html>